// 在我们使用模块的store时，我们需要将我们的模块对象类型注解为module类型，从vuex中导入开始
import { Module } from 'vuex'
import {
  accountLoginRequest,
  accountUserInfo,
  accountMenus
} from '@/service/login/login'
import localCache from '@/utils/cache'
import { IRequest } from '@/service/types'
import { mapMenusToRoute } from '@/utils/map-menus'
import router from '@/router'
// 该module类型必须传入两个泛型
// 泛型1：传入当前模块的state的类型注解
import { ILoginState } from './types'
// 泛型2：传入根store的state的类型注解，所以我们需要提前在根模块中导入类型
import { IRootState } from '../types'
const loginStore: Module<ILoginState, IRootState> = {
  namespaced: true,
  state() {
    return {
      token: '',
      userInfo: {},
      userMenu: []
    }
  },
  getters: {},
  actions: {
    // 处理账号登录请求业务
    async accountLoginAction({ commit }, payload: any) {
      // 1. 实现登录请求逻辑
      const res = await accountLoginRequest(payload)
      const id = res.data.id
      // 将token保存到vuex
      commit('changeToken', res.data.token)
      // 将token保存到本地存储，方便我们判断
      localCache.setCache('token', res.data.token)

      // 2. 实现请求用户信息数据
      const { data: userInfo } = await accountUserInfo(id)
      commit('changeUserInfo', userInfo)
      // 将userInfo保存到本地存储
      localCache.setCache('userInfo', userInfo)

      // 3. 实现请求用户权限菜单列表
      const { data: userMenu } = await accountMenus(userInfo.role.id)
      commit('changeUserMenu', userMenu)
      // 将userMenu保存到本地存储
      localCache.setCache('userMenu', userMenu)

      // 4. 跳转首页
      router.push('/main')
    },
    // 处理手机登录请求业务
    phoneLoginAction({ commit }, payload: any) {
      console.log('vuex:phoneLoginAction触发')
      console.log(payload)
    },
    // 处理刷新后初始化vuex操作，这是为了防止刷新后vuex的数据丢失
    loadLocalLogin({ commit }) {
      const token = localCache.getCache('token')
      if (token) {
        commit('changeToken', token)
      }
      const userInfo = localCache.getCache('userInfo')
      if (userInfo) {
        commit('changeUserInfo', userInfo)
      }
      const userMenu = localCache.getCache('userMenu')
      if (userMenu) {
        commit('changeUserMenu', userMenu)
      }
    }
  },

  mutations: {
    // 提交更改token业务
    changeToken(state, token: string) {
      state.token = token
    },
    // 提交更改用户信息业务
    changeUserInfo(state, userInfo: IRequest) {
      state.userInfo = userInfo
    },
    // 提交更改用户菜单列表业务
    changeUserMenu(state, userMenu: any[]) {
      state.userMenu = userMenu
      // 在change时动态注册路由
      // 调用封装的mapMenusToRoute函数，通过传入一个用户菜单列表来动态生成路由列表，他给我们返回经过筛选的路由
      const routes = mapMenusToRoute(userMenu)
      // 动态添加路由
      routes.forEach((route) => {
        router.addRoute('main', route)
      })
    }
  }
}

export default loginStore
